import React, { Component } from 'react';
import "../assets/css/CommodityCard.css";
import { withRouter } from "react-router-dom";

class CommodityCard extends Component {
    constructor(props) {
        super(props)
    
        this.state = {
             item:props.item,
             del:props.del
        }
        this.ToDetail = this.ToDetail.bind(this)
    }
    
    ToDetail(){
        this.props.history.push("/commodityDetail/" + this.state.item.pid)
    }
    
    render() {
        return (
            <li className="CommodityCard" onClick={this.ToDetail}>
                <img src={this.state.item.smallImg} alt=""/>
                <p className="CommodityCard_desc">{this.state.item.desc}</p>
                <p className="CommodityCard_name">{this.state.item.name}</p>
                <span>￥{this.state.item.price}</span>
                <i onClick={this.props.delCollection} style={{backgroundImage:`url(${require(this.state.del ? '../assets/images/rubbish.png' : '../assets/images/cart.png').default})`}}></i>
            </li>
        );
    }
}

export default withRouter(CommodityCard);